@page "/admin/blogs/category"

@layout BlogsLayout

@inject HttpClient _http
@inject NavigationManager _navigation
@inject IStringLocalizer<Resource> _localizer
@inject IJSRuntime _jsruntime
@inject IToaster _toaster


@code {

  protected List<FrontCategoryItemDto>? Categories { get; set; }
  protected string? SearchTerm { get; set; }

  protected override async Task OnInitializedAsync()
  {
    await LoadAsync();
  }

  protected async Task LoadAsync()
  {
    var result = await _http.GetFromJsonAsync<List<FrontCategoryItemDto>>($"api/category/items");
    Categories = result;
  }

  protected void CheckAll(object? checkValue)
  {
    if (checkValue != null && Categories != null)
    {
      var isChecked = (bool)checkValue;
      Categories.ForEach(p => p.Selected = isChecked);
      StateHasChanged();
    }
  }

  public async Task RunAction(GroupAction action)
  {
    if (action == GroupAction.Delete)
    {
      var confirm = _localizer["confirm-delete"];
      var confirmed = await _jsruntime.InvokeAsync<bool>("confirm", confirm.Value);
      if (!confirmed) return;
    }

    if (Categories != null)
    {
      var categoryeId = Categories.Where(m => m.Selected).Select(m => m.Id);
      if (categoryeId.Any())
      {
        var categoryeIdsString = string.Join(",", categoryeId);
        await _http.DeleteAsync($"api/category/{categoryeIdsString}");
      }
    }
    await LoadAsync();
  }

  protected async Task SearchKeyPress(KeyboardEventArgs e)
  {
    if (e.Key == "Enter")
      await SearchCategories();
  }

  protected async Task SearchCategories()
  {
    if (string.IsNullOrEmpty(SearchTerm))
      SearchTerm = "*";

    Categories = await _http.GetFromJsonAsync<List<FrontCategoryItemDto>>($"api/category/{SearchTerm}");
    SearchTerm = "";
  }

  protected void OnEdit(int categoryId)
  {
    _navigation.NavigateTo($"/admin/blogs/category/{categoryId}");
  }
}

<PageTitleComponent Title="@_localizer["categories"]" />

<div class="section-content">
  <div class="list-toolbar">
    <label class="list-check form-check" data-bs-toggle="tooltip" title="@_localizer["select-all"]">
      <input type="checkbox" @onchange="EventArgs => { CheckAll(EventArgs.Value); }" class="list-check-input form-check-input">
    </label>
    @*<a class="btn btn-blogifier me-3 -add" href="/admin/pages/editor">@_localizer["new-category"]</a>*@
    @if (Categories != null && Categories.Count > 0)
    {
      <div class="dropdown dropdown-flush">
        <button class="btn btn-link dropdown-toggle" type="button" id="dropdownAction" data-bs-toggle="dropdown" aria-expanded="false">
          @_localizer["actions"]
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownAction">
          <button type="button" @onclick="(async ()=> await RunAction(GroupAction.Delete))" class="dropdown-item text-danger">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
            </svg>
            <span>@_localizer["delete"]</span>
          </button>
        </div>
      </div>
    }
    <button type="button" class="btn btn-link list-search-toggle ms-auto" data-bs-toggle="collapse" data-bs-target="#collapseSearch">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="@_localizer["search"]">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4765 11.8908C9.4957 12.5892 8.29582 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.29584 12.5892 9.49573 11.8907 10.4766L15.0549 13.6407C15.4454 14.0312 15.4454 14.6644 15.0549 15.0549C14.6644 15.4455 14.0312 15.4455 13.6407 15.0549L10.4765 11.8908ZM11 7C11 9.20914 9.20914 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3C9.20914 3 11 4.79086 11 7Z" />
      </svg>
    </button>
  </div>

  <div class="list-search collapse" id="collapseSearch">
    <input @bind="SearchTerm" @onkeyup="SearchKeyPress" class="list-search-input" type="search">
    <button @onclick="(async () => await SearchCategories())" class="list-search-button" type="button">
      @_localizer["search"]
    </button>
  </div>

  @if (Categories != null && Categories.Any())
  {
    <ul class="list mb-5" aria-label="posts">
      <Virtualize Items="Categories" Context="category">
        <li class="list-item">
          <label class="list-check form-check" data-bs-toggle="tooltip" title="@_localizer["select"]">
            <input type="checkbox" @bind="category.Selected" class="list-check-input form-check-input">
          </label>
          <a class="list-title -link" href="" @onclick="()=>OnEdit(category.Id)" @onclick:preventDefault>
            @category.Category
          </a>
          <span class="list-text -nowrap ms-auto">
            @category.PostCount
          </span>
          <a class="list-btn" href="category/@category.Category" target="_blank" data-bs-toggle="tooltip" title="@_localizer["view"]">
            <svg class="bi" width="15" height="15" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="@_localizer["view"]">
              <path d="M7.85724 2.17097L6 4L7 5L8.93201 3.24577C9.89935 2.27845 11.4719 2.27845 12.4393 3.24577C13.4066 4.21308 13.4066 5.78571 12.4393 6.75303L10.5141 8.75674L11.5141 9.75674L13.5141 7.82783C15.0754 6.26652 15.0754 3.73225 13.5141 2.17094C11.9528 0.609657 9.41852 0.609688 7.85724 2.17097Z" />
              <path d="M3.24575 12.4392C2.2784 11.4719 2.2784 9.89935 3.24575 8.93201L5 7L4 6L2.17098 7.85721C0.609703 9.41849 0.609642 11.9528 2.17098 13.514C3.73226 15.0753 6.26656 15.0753 7.82784 13.514L9.5141 11.7567L8.5141 10.7567L6.75301 12.4392C5.78573 13.4066 4.2131 13.4066 3.24575 12.4392Z" />
              <path d="M4.99941 9.55426L9.52486 5.02878L10.6563 6.16016L6.13076 10.6856L4.99941 9.55426Z" />
            </svg>
          </a>
        </li>
      </Virtualize>
    </ul>
  }
  else
  {
    <div class="list-notfound -crazy">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-smile-upside-down" viewBox="0 0 16 16">
        <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0-1a8 8 0 1 1 0 16A8 8 0 0 1 8 0z" />
        <path d="M4.285 6.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 4.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 3.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 9.5C7 8.672 6.552 8 6 8s-1 .672-1 1.5.448 1.5 1 1.5 1-.672 1-1.5zm4 0c0-.828-.448-1.5-1-1.5s-1 .672-1 1.5.448 1.5 1 1.5 1-.672 1-1.5z" />
      </svg>
      <p>@_localizer["list-is-empty"]</p>
    </div>
  }
</div>


